<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }
    .container {
      min-width: 100px;
      min-height: 100px;
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    .box1 {
      width: 100px;
      height: 100px;
      border: dashed 2px #ccc;
      position: relative;
      font-size: 50px;
      font-weight: 400;
      display: flex;
      flex: 0 0 auto;
      justify-content: center;
      line-height: 100px;
      color: rgba(0, 0, 0, 0.322);
    }
    .box {
      /* box-sizing: border-box; */
      width: 100px;
      height: 100px;
      border: dashed 2px #ccc;
      position: relative;
    }
    input[type="file"] {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      width: 100px;
      height: 100px;
      z-index: 1;
    }
  </style>
  <body>
    <div class="container"></div>

    <script src="http://unpkg.com/jquery"></script>
    <script>
      //进图加载
      $(".container").append(`
       <div class="box1">
         +
       </div>
      `);

      $(".container").on("click", ".box1", function () {
        $(".container").on("change", ".box", function () {
          //H5新增语法 FileReader类
          const reader = new FileReader();
          //base64 编码 reader
          reader.readAsDataURL($(this).find("input")[0].files[0]);
          reader.onload = (e) => {
            $(this).css({
              backgroundImage: `url(${e.target.result})`,
              backgroundSize: "100% 100%",
            });
          };
        });

        //prepend在前面加 append在后面加
        $(`.container`).prepend(`
       <div class="box">
         <input type="file" />
       </div>
      `);
      });
    </script>
  </body>
</html>
